<template>
<div class="sdsd" v-loading="loading">
  <el-table :data="tableData" @cell-click="cellClick"  style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</div>
</template>

<script lang="ts" setup>
import { ElTable, ElTableColumn, ElLoading } from "element-plus";
import { ref, defineEmits, onMounted } from 'vue';
const emits = defineEmits(['cellClick'])// 定义一个或多个自定义事件

let loading = ref(true)

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const cellClick = (row, column, cell, event) => {
  console.log(row)
  emits('cellClick', row)
}
onMounted(() => {
  // let loading = ElLoading.service({ target: '.sdsd' })
  setTimeout(() => {
    // loading.close()
    loading.value = false
  }, 3000)
})

</script>

<style scoped>

</style>
